<template>
	<view>
		<global-contact></global-contact>
		<view class="head">
			<block v-if="keyList.length>0">
				<view class="path" v-for="(item,index) in keyList" :key="index">
					<text>{{item.text}}</text>
					<image src="https://www.atuanjian.com/appletStatic/static/cloae.png" mode="aspectFit" @click="close(item,index)"></image>
				</view>
			</block>
			<block v-else>
				<text class="reset">请选择筛选条件</text>
			</block>
		</view>

		<view class="content">
			<view class="left">
				<scroll-view scroll-y="true" class="scroll1">
					<view :class="menuIndex==index?'item active':'item'" v-for="(item,index) in category" :key="index"
						@click="menuClick(item,index)">
						<view class="circle"></view>
						<text>{{item.text}}</text>
					</view>
				</scroll-view>
			</view>

			<view class="right" v-if="type==0">
				<scroll-view scroll-x="true" class="scroll2">
					<view v-if="category[menuIndex]" class="nav">
						<view :class="navIndex==index?'items active':'items'"
							v-for="(item,index) in category[menuIndex].child" :key="index"
							@click="navClick(item,index)">
							<text>{{item.text}}</text>
							<view class="line"></view>
						</view>
					</view>
				</scroll-view>
				<view class="contain">
					<scroll-view scroll-y="true" class="scroll3">
						<view v-if="category[menuIndex]" class="wrap">
							<view :class="['text',{'active':item.check}]"
								v-for="(item,index) in category[menuIndex].child[navIndex].child" :key="index"
								@click="cityClick(item,index)">{{item.text}}</view>
						</view>
					</scroll-view>
				</view>
			</view>

			<view class="category" v-if="type==1">
				<!-- category[menuIndex] -->
				<block v-if="category[menuIndex].hasThird">
					<view class="right">
						<scroll-view scroll-x="true" class="scroll2">
							<view v-if="category[menuIndex]" class="nav">
								<view :class="navIndex==index?'items active':'items'"
									v-for="(item,index) in category[menuIndex].child" :key="index"
									@click="navClick(item,index)">
									<text>{{item.text}}</text>
									<view class="line"></view>
								</view>
							</view>
						</scroll-view>
						<view class="contain">
							<scroll-view scroll-y="true" class="scroll3">
								<view v-if="category[menuIndex]" class="wrap">
									<view :class="['text',{'active':item.check}]"
										v-for="(item,index) in category[menuIndex].child[navIndex].child" :key="index"
										@click="activeItemClick(item,index,navIndex)">{{item.text}}</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</block>
				<block v-else>
					<scroll-view scroll-y="true" class="scroll4">
						<view v-if="category[menuIndex]" class="wraper">
							<view :class="item.check?'item active':'item'"
								v-for="(item,index) in category[menuIndex].child" :key="index"
								@click="categoryClick(item,index)">
								<view class="title">{{item.text}}</view>
								<!-- <view class="list">
									<text @click.stop="activeItemClick(item1,index1,index)" :class="item1.check?'active':''" v-for="(item1,index1) in item.child" :key="index1">{{item1.text}}</text>
								</view> -->
							</view>
						</view>
					</scroll-view>
				</block>


			</view>

		</view>
		<view class="footer">
			<view class="left" @click="clear()">清空条件</view>
			<view class="right" @click="viewMore()">查看产品</view>
		</view>
	</view>
</template>

<script>
	import {
		productType
	} from '@/utils/request.js'
	export default {
		data() {
			return {
				isChange: '',
				keyList: [
					// 	{
					// 	text:'西安'
					// },
				],
				type: 0, //默认是0  设计图有两个版式  0是版式1  1是版式2  接口只有版式1的数据

				category: [], // 数据源
				menuIndex: 0, //  0 left menu
				navIndex: 0, //  0 right nav 
				cityIndex: -1, //  0 right content 

				// 以下废弃
				activeIndex: 0, // right 1 nav
				activeItem: -1, // right 1 content 
				// category 
				mode: 1,
				categoryId: 1,

				defaultList: [{
					child: [{
						child: []
					}],
					hasThird: false
				}]
			}
		},
		methods: {
			async productType(data) {
				return await productType(data)
			},
			getCategory() {
				const {path, lastOption} = this.getLastOptionAndPath();
				let data = {
					categoryId: this.categoryId
				}
				this.productType(data).then(res => {
					this.defaultList = JSON.parse(JSON.stringify(res.type))
					this.category = res.type
					if (this.category[0].applet_ui != 1) {
						this.type = 1
					}
					this.category.forEach(val => {
						Object.assign(val, {
							check: false
						})
						if (val.hasOwnProperty('child') && val.child && val.child.length > 0) {
							val.child.forEach(val2 => {
								Object.assign(val2, {
									check: false
								})
								if (val2.hasOwnProperty('child') && val2.child && val2.child
									.length > 0) {
									Object.assign(val, {
										hasThird: true
									})
									val2.child.forEach(val3 => {
										Object.assign(val3, {
											check: false
										})
									})
								} else {
									Object.assign(val, {
										hasThird: false
									})
								}
							})
						}
					})
					this.getComputed()
					const option = this.options;
					if (option && option.typeId) {
						const keyIds = option.typeId.split(',').filter(item => item !== '');
						this.keyList = this.getKeyListByCate(keyIds, this.category);
					} else if (lastOption && lastOption.id && uni.getStorageSync(lastOption.id)) {
						const ids = uni.getStorageSync(lastOption.id).split(',');
						this.keyList = this.getKeyListByCate(ids, this.category);
					}
					this.$forceUpdate()
					// console.log(res)
					console.log('category 112 ', this.category)
				}).catch(err => {
					console.log(err)
				})
			},
			// 除过城市  一级点击  仅有一级/还有二级     ???
			categoryClick(item, index) {
				console.log('点击一级', item)
				if (!item.hasOwnProperty('child')) {
					// 仅有一级 
					if (item.is_radio == 1) { // 单
						if (this.category[this.menuIndex].child[index].check) {
							this.category[this.menuIndex].child[index].check = false
						} else {
							this.category[this.menuIndex].child.forEach(val => {
								if (val.check) {
									val.check = false
								}
							})
							this.category[this.menuIndex].child[index].check = true
						}
					} else { // 多 
						this.category[this.menuIndex].child[index].check = !this.category[this.menuIndex].child[index]
							.check
					}
				}
				this.getComputed()
				this.$forceUpdate()
			},
			close(item, index) {
				this.keyList.splice(index, 1)
				// ing 刷新当前页面 
				this.category.forEach(val => {
					if (val.child && val.child.length > 0) {
						val.child.forEach(val2 => {
							if (val2.id == item.id) {
								val2.check = false
							}
							if (val2.child && val2.child.length > 0) {
								val2.child.forEach(val3 => {
									if (val3.id == item.id) {
										val3.check = false
									}
								})
							}
						})
					}
				})
				this.$forceUpdate()

			},
			// 计算 当前页面展示的数据 返回上一页面的id
			getComputed() {
				// console.log('list',this.category[this.menuIndex])
				this.keyList = []
				this.category.forEach(val => {
					if (val.child && val.child.length > 0) {
						// 第一级
						val.child.forEach(val2 => {
							if (val2.check) {
								this.keyList.push({
									text: val2.text,
									id: val2.id,
									pid: val2.pid,
									hot: 'hot'
								})
							}
							if (val2.child && val2.child.length > 0) {
								val2.child.forEach(val3 => {
									if (val3.check) {
										this.keyList.push({
											text: val3.text,
											id: val3.id,
											pid: val3.pid,
											hot: 'hot'
										})
									}
								})
							}
						})
					}
				})
			},


			// left menu
			menuClick(item, index) {
				if (this.menuIndex != index) {
					this.menuIndex = index // 左侧所有的大类 类目 
					this.navIndex = 0 //城市大类
					if (item.applet_ui == 1) {
						this.type = 0
					} else {
						this.type = 1
					}
				}
			},
			// right header
			navClick(item, index) {
				if (this.navIndex != index) {
					this.navIndex = index
					// this.cityIndex=-1
					// this.activeItem=-1
				}
			},

			// right content 仅对城市
			cityClick(item, index) {
				//点击城市   ???
				// console.log('点击具体的城市',index,this.category[this.menuIndex].child[this.navIndex].child[index])
				let flag = this.category[this.menuIndex].child[this.navIndex].child
				if (flag[index].is_radio == 1) {
					if (flag[index].check) {
						this.category[this.menuIndex].child[this.navIndex].child[index].check = false
					} else {
						this.category[this.menuIndex].child[this.navIndex].child.forEach((val, i) => {
							if (val.check) {
								val.check = false
							}
						})
						this.category[this.menuIndex].child[this.navIndex].child[index].check = true
					}
				} else { // 多选
					this.category[this.menuIndex].child[this.navIndex].child[index].check = !this.category[this.menuIndex]
						.child[this.navIndex].child[index].check
				}
				this.getComputed()
				this.$forceUpdate()
				console.log('城市', this.category[this.menuIndex].child)

			},

			// 热门需求 仅对二级点击 
			activeItemClick(item, index, i) {
				//    3   /   2
				console.log('二级点击', item, index, i)
				this.activeIndex = i
				this.activeItem = index
				if (item.is_radio == 1) {
					if (item.check) {
						this.category[this.menuIndex].child[i].child[index].check = false
					} else {
						this.category[this.menuIndex].child[i].child.forEach(val => {
							if (val.check) {
								val.check = false
							}
						})
						this.category[this.menuIndex].child[i].child[index].check = true
					}
				} else {
					this.category[this.menuIndex].child[i].child[index].check = !this.category[this.menuIndex].child[i]
						.child[index].check
				}
				this.getComputed()
				this.$forceUpdate()
			},

			// 清空
			clear() {
				this.keyList = []
				this.menuIndex = 0
				this.navIndex = 0
				this.cityIndex = -1
				this.unCheckChild(this.category);
			},
			unCheckChild(target) {
				target.forEach(item => {
					if (item.hasOwnProperty('check')) {
						item.check = false;
					}
					if (item.hasOwnProperty('child')) {
						this.unCheckChild(item.child);
					}
				});
			},
			// 团建产品
			viewMore() {
				uni.setStorageSync('mark_id', this.categoryId)
				uni.setStorageSync('categoryData', JSON.stringify(this.category))
				let data = JSON.stringify(this.keyList)
				uni.setStorageSync('saveData', data)
				// uni.setStorageSync('goods_mark','1')
				uni.setStorageSync('goods', data)
				// console.log(data)
				// return
				const {path, lastOption} = this.getLastOptionAndPath();
				if (lastOption.id) {
					uni.setStorageSync(lastOption.id, this.keyList.map(item => item.id).join(','));
				}
				uni.navigateBack({
					delta: 1,
				});
			},
			getKeyListByCate(ids, cate) {
				const result = [];
				const tempId = ids.map(item => Number(item));
				cate.forEach(val => {
					if (val.child && val.child.length > 0) {
						// 第一级
						val.child.forEach(val2 => {
							if (tempId.includes(val2.id)) {
								result.push({
									text: val2.text,
									id: val2.id,
									pid: val2.pid,
									hot: 'hot'
								});
								val2.check = true;
							}
							if (val2.child && val2.child.length > 0) {
								val2.child.forEach(val3 => {
									if (tempId.includes(val3.id)) {
										result.push({
											text: val3.text,
											id: val3.id,
											pid: val3.pid,
											hot: 'hot'
										});
										val3.check = true;
									}
								})
							}
						})
					}
				})
				return result;
			},
			getLastOptionAndPath() {
				const allPage = getCurrentPages();
				const lastPage = allPage[allPage.length - 2];
				if (!lastPage) return {path: '', lastOption: ''}
				// #ifdef MP-WEIXIN
				let path = `/${lastPage.route}`;
				const lastOption = lastPage.options;
				// #endif
				
				// #ifdef H5
				let path = lastPage.__page__.path;
				const lastOption = lastPage.__page__.options;
				// #endif
				return {path, lastOption};
			}
		},
		onLoad(option) {
			const {path, lastOption} = this.getLastOptionAndPath();
			if (option.categoryId) {
				this.categoryId = option.categoryId
				// categoryData    mark_id
				let ls = uni.getStorageSync('mark_id')
				// console.log('1')
				console.log(ls, this.categoryId)
				if (ls && ls == this.categoryId) {
					// console.log('2')
					if (uni.getStorageSync('categoryData')) {
						// console.log('3')
						this.category = JSON.parse(uni.getStorageSync('categoryData'));
						if (option && option.typeId) {
							const keyIds = option.typeId.split(',').filter(item => item !== '');
							this.unCheckChild(this.category);
							this.keyList = this.getKeyListByCate(keyIds, this.category);
						} else if (lastOption && lastOption.id && uni.getStorageSync(lastOption.id)) {
							const ids = uni.getStorageSync(lastOption.id).split(',');
							this.keyList = this.getKeyListByCate(ids, this.category);
						} else {
							this.keyList = JSON.parse(uni.getStorageSync('saveData'));
						}
						if (this.category[0].applet_ui == 1) {
							this.type = 0
						} else {
							this.type = 1
						}
						console.log('309', this.keyList, this.category)
						this.$forceUpdate()
					} else {
						this.getCategory()
					}
				} else {
					this.getCategory()
				}
			}
		},
		onShareAppMessage() {

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.head {
		height: 56rpx;
		padding: 32rpx 30rpx;
		background-color: #FFFFFF;
		margin-bottom: 12rpx;
		font-size: 0;
		overflow-x: auto;
		white-space: nowrap;

		.path {
			height: 56rpx;
			display: inline-block;
			padding: 0 20rpx;
			line-height: 56rpx;
			background-color: #FFB850;
			border-radius: 38rpx;
			font-size: 0;
			margin-right: 20rpx;

			text {
				font-size: 28rpx;
				font-family: 苹方-简;
				font-weight: normal;
				color: #FFFFFF;
				display: inline-block;
				vertical-align: middle;
			}

			image {
				width: 18rpx;
				height: 18rpx;
				display: inline-block;
				vertical-align: middle;
				margin-left: 12rpx;
			}
		}

		.reset {
			display: block;
			height: 56rpx;
			line-height: 56rpx;
			font-size: 28rpx;
			font-family: 苹方-简;
			font-weight: normal;
			color: #666666;
		}
	}

	.content {
		@include flex_style(flex-start, flex-start, row nowrap);
		padding-bottom: 108;

		.left {
			background-color: #F4F4F4;
			width: 280rpx;

			.scroll1 {
				height: 80vh; // vh+

				.item {
					padding-left: 30rpx;
					@include flex_style(flex-start, center, row nowrap);

					.circle {
						width: 16rpx;
						height: 16rpx;
						border-radius: 50%;
						margin-right: 30rpx;
					}

					text {
						font-size: 32rpx;
						font-family: 苹方-简;
						font-weight: normal;
						line-height: 80rpx;
						color: #666666;
					}
				}

				.active {
					background-color: #FFFFFF;

					.circle {
						background-color: #FFB850;
					}

					text {
						color: #333333;
						font-weight: bold;
					}
				}
			}
		}

		.right {
			width: 470rpx;
			background-color: #FFFFFF;

			.scroll2 {
				height: 80rpx;

				.nav {
					@include flex_style(space-between, center, row nowrap);
					white-space: nowrap;
					padding-left: 40rpx;

					.items {
						padding-top: 12rpx;
						@include flex_style(flex-start, center, column nowrap);
						// margin-right: 72rpx;
						margin-right: 40rpx;

						text {
							font-size: 32rpx;
							font-family: 苹方-简;
							font-weight: normal;
							// line-height: 42px;
							color: #333333;
						}

						.line {
							// width: 64rpx;
							width: 80%;
							height: 6rpx;
							margin-top: 14rpx;
							background-color: #FFFFFF;
						}
					}

					.active {
						.line {
							background-color: #FFB850;
						}
					}
				}
			}

			.contain {
				border-top: 2rpx solid #F4F4F4;
				background-color: #FFFFFF;

				.scroll3 {
					height: 77vh;

					.wrap {
						.text {
							padding-left: 36rpx;
							line-height: 60rpx;
							font-size: 30rpx;
							font-family: 苹方-简;
							font-weight: normal;
							color: #1A1A1A;
						}

						.active {
							font-size: 34rpx;
							font-weight: 600;
							color: #FFB850;
						}
					}
				}
			}
		}

		.category {
			width: 470rpx;

			.scroll4 {
				height: 83.77vh; // vh+

				.wraper {
					background-color: #FFFFFF;
					padding: 36rpx 38rpx 10rpx 40rpx;

					.item {
						margin-bottom: 20rpx;

						.title {
							font-size: 30rpx;
							font-family: PingFang SC;
							line-height: 40rpx;
							color: #1A1A1A; //#FFB850
							margin-bottom: 22rpx;
						}

						.list {
							@include flex_style(flex-start, center, row wrap);

							text {
								margin-right: 24rpx;
								margin-bottom: 20rpx;
								font-size: 20rpx;
								font-family: 苹方-简;
								font-weight: normal;
								line-height: 28rpx;
								color: #666666;
							}

							.active {
								color: #FFB850;
							}
						}
					}

					.active {
						.title {
							color: #FFB850;
						}
					}
				}
			}
		}
	}

	.footer {
		width: 750rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		box-shadow: 0px 0px 12rpx rgba(140, 140, 140, 0.16);
		@include flex_style(flex-start, flex-start, row nowrap);

		.left {
			width: 280rpx;
			line-height: 108rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: 苹方-简;
			font-weight: normal;
			color: #333333;
			background-color: #FFFFFF;
		}

		.right {
			width: 470rpx;
			line-height: 108rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: 苹方-简;
			font-weight: normal;
			color: #FFFFFF;
			background-color: #222222;
		}
	}
</style>